<!DOCTYPE html> <html> 
<head>    
	<meta charset="utf-8" />    
	<meta name="viewport" content="width=device-width" />    
	<title>extjs4.2</title>    
	<link href="__PUBLIC__/ext42/resources/css/ext-all-neptune.css" rel="stylesheet" />      
	<script src="__PUBLIC__/ext42/bootstrap.js"></script>
	<script src="__PUBLIC__/ext42/locale/ext-lang-zh_CN.js"></script> 
</head> 
<body>    

   <script type="text/javascript">
      Ext.onReady(function() {
          // 建立一个store要使用的 model
          Ext.define('User', {
              extend: 'Ext.data.Model',
              fields: [
                  {name: 'user_id', type: 'int'},
                  {name: 'username',  type: 'string'},
                  {name: 'nick',  type: 'string'},
                  {name: 'email',       type: 'string'},
                  {name: 'regtime',       type: 'int'},
                  {name: 'status',       type: 'int'}
              ]
          });
          //数据源 store
          var myStore = Ext.create('Ext.data.Store', {
              model: 'User',
              pageSize:2,
              proxy: {
                  type: 'ajax',
                  url: "{:U('user/info')}",
                  reader: {
                      type: 'json',
                      root: 'users'
                  }
              },
              autoLoad: true //自动加载
          });

         //表单
         Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            height: 400,
            title:'用户管理',
            //closable : true,
            forceFit: true,//列宽自适应
            columnLines:true,//列框线
            store:myStore,
            tbar: [
                    { 
                      xtype: 'button', text: '新增', border:false, 
                      handler:function(){
                        userAdd.show();//弹出窗口
                      } 
                    },
                    { 
                      xtype: 'button', text: '编辑', border:false, 
                      handler:function(){

                      } 
                    }
                  ],
            bbar: { xtype: 'pagingtoolbar',displayInfo : true,store:myStore,},
            columns: [{ header:'ID', dataIndex:'user_id' },
                      { header:'用户名', dataIndex:'username' },
                      { header:'昵称', dataIndex:'nick' },
                      { header:'邮箱', dataIndex:'email' },
                      { header:'注册时间', dataIndex:'regtime',renderer:function(value){
                           return new Date(parseInt(value) * 1000).toLocaleString().replace(/:\d{1,2}$/,'');
                         } 
                      },
                      { header:'状态', dataIndex:'status',renderer:function(value){
                           return value?'正常':'<font color="red">冻结</font>';
                        }
                      }
                     ]
         })
        
        //创建formpanel 用来放入弹出层panel
        var formPanel = Ext.create('Ext.form.Panel', {
            bodyPadding:20,
            // 将会通过 AJAX 请求提交到此URL
            url: "{:U('user/add')}",
            // 表单域 Fields 将被竖直排列, 占满整个宽度
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
            // The fields
            defaultType: 'textfield',
            items: [ {
                        name:'user_id',
                        hidden:true
                      },{
                        fieldLabel:'用户名',
                        name:'username',
                        allowBlank:false
                      },{
                        fieldLabel:'昵称',
                        name:'nick',
                      },{
                        fieldLabel:'邮箱',
                        name:'email'
                      },{
                        fieldLabel:'注册时间',
                        name:'regtime',
                        xtype:'datefield',
                        format:'Y-m-d'
                      },{
                        fieldLabel:'状态',
                        name:'status',
                        xtype:'combobox',
                        store:new Ext.data.ArrayStore({
                          fields:['value','text'],
                          data:[[1,'正常'],[0,'冻结']]
                        }),
                        valueField:'value',
                        displayField:'text'
                      }],

            // 重置 和 保存 按钮.
            buttons: [{
                text: '重置',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }, {
                text: '保存',
                formBind: true, //only enabled once the form is valid
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            success: function(form, action) {
                               Ext.Msg.alert('保存成功', action.result.msg);
                            },
                            failure: function(form, action) {
                                Ext.Msg.alert('操作失败', action.result.msg);
                            }
                        });
                    }
                }
            }]
        });

        //add表单弹出层
        var userAdd = Ext.create('Ext.window.Window', {
            title: '新增用户',
            height: 350,
            width: 300,
            layout: 'fit',
            items:formPanel 
        }) //.show();

      });
   </script>

</body> 
</html>
